<template>
    <div class="content">
        <div class="mymusic">
            <div class="left">
                <el-menu default-active="1-1" class="el-menu-vertical-demo">
                    <el-menu-item index="1" @click="currentPage = 'mysinger'">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>我的歌手</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="currentPage = 'myradiostation'">
                        <el-icon>
                            <Mic />
                        </el-icon>
                        <span>我的电台</span>
                    </el-menu-item>
                    <el-sub-menu index="3" @click="currentPage = 'myplaylist'">
                        <template #title>
                            <el-icon>
                                <Headset />
                            </el-icon>
                            <span>我的歌单</span>
                        </template>
                        <el-menu-item index="1-1">我喜欢的音乐</el-menu-item>
                        <el-menu-item index="1-2">dj的歌曲</el-menu-item>
                        <el-menu-item index="1-3">国语大全</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </div>
            <div class="right">
                <!-- 内容 -->
                <Suspense>
                    <template #default>
                        <transition name="fade">
                            <KeepAlive>
                                <component :is="AsyncComponent" />
                            </KeepAlive>
                        </transition>
                    </template>
                    <template #fallback>
                        <div class="loading">页面加载中...</div>
                    </template>
                </Suspense>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent, computed, onMounted } from 'vue'

onMounted(() => {

})

// 切换
const currentPage = ref('myplaylist')

const componentsMap: Record<string, any> = {
    a: defineAsyncComponent(() => import('../views/a.vue')),
    myplaylist: defineAsyncComponent(() => import('../views/MyPlayList.vue')),
    mysinger: defineAsyncComponent(() => import('../views/MySinger.vue')),
    myradiostation: defineAsyncComponent(() => import('../views/MyRadioStation.vue'))
}

const AsyncComponent = computed(() => componentsMap[currentPage.value])
</script>

<style lang="scss" scoped>
/* 切换动画 */
.loading {
    text-align: center;
    margin-top: 20px;
    font-size: 18px;
    color: #999;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* 内容样式 */
.content {
    height: 735px;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    zoom: 1;

    .mymusic {
        min-height: 735px;
        background: url(../assets/MyMusic/wrap3.png) repeat-y center 0;
        width: 980px;
        margin: 0 auto;
        background-color: #fff;
        border: 1px solid #d3d3d3;
        border-width: 0 1px;
        display: flex;

        .left {
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: 50px;
            padding-top: 40px;
            // float: left;
            width: 240px;
            // position: fixed;
            zoom: 1;
        }

        .right {
            height: 100%;
            // float: right;
            width: 740px;
            padding-bottom: 50px;
            position: relative;
            zoom: 1;
        }
    }
}
</style>